

    <style>

        .customExpandButton{
            float:right;
            margin-top: 2px;
            margin-left: 3px;
        }

        .expanded {
            animation-name: toExpanded;
            animation-duration: 1s;
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }

        .fa-arrow-right {
            color: cornflowerblue;
        }

        .collapsed {
            animation-name: toCollapsed;
            animation-duration: 1s;
            -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
            transform: rotate(0deg);
        }

        .customHeaderMenuButton,
        .customHeaderLabel,
        .customHeaderLabel,
        .customSortDownLabel,
        .customSortUpLabel,
        .customSortRemoveLabel
        {
            margin-top: 2px;
            margin-left: 4px;
            float: left;
        }

        .customSortDownLabel{
            margin-left: 10px;
        }

        .customSortUpLabel{
            margin-left: 1px;
        }

        .customSortRemoveLabel{
            float: left;
            font-size: 11px;
        }

        @keyframes  toExpanded{
            from {
                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
                transform: rotate(180deg);
            }
        }

        @keyframes toCollapsed{
            from {
                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
                transform: rotate(180deg);
            }
            to {
                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
                transform: rotate(0deg);
            }
        }

    </style>




<div id="myGrid" style="height: 100%;" class="ag-theme-quartz"></div>


